<template>
  <div>
    <px-dialog v-model="innerVisible" draggable clickHideContent width="1372" :before-close="close" title="指标" append-to-body align-center>
      <px-form class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
        <px-form-item label="指标名称">
          <px-input v-model="queryParams.measureName" :maxlength="100" placeholder="请输入指标名称" clearable />
        </px-form-item>
        <px-form-item label="指标编码">
          <px-input v-model="queryParams.measureCode" :maxlength="100" placeholder="请输入指标编码" clearable />
        </px-form-item>
        <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery2('search')">搜索</px-button>
        <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
      </px-form>
      <px-table v-loading="loading" :data="rukuList" height="calc(100vh - 339px)" show-overflow-tooltip highlight-current-row border>
        <!-- <px-table-column type="selection" width="40" /> -->
        <px-table-column label="" width="40">
          <template #default="scope">
            <span>
              <px-radio v-model="selectrow" :label="scope.row" size="large" @change="handelRadio(scope.row)">{{
                scope.row.xx ? scope.row.xx : " "
              }}</px-radio></span
            >
          </template>
        </px-table-column>
        <px-table-column label="指标名称" width="160" prop="inboundNumber">
          <template #default="scope">
            <span>{{ scope.row.measureName }}</span>
          </template>
        </px-table-column>
        <px-table-column label="指标编码" prop="gasType">
          <template #default="scope">
            <span>{{ scope.row.measureCode }}</span>
          </template>
        </px-table-column>
        <px-table-column label="指标单位" prop="value">
          <template #default="scope">
            <span>{{ scope.row.measureUnit }}</span>
          </template>
        </px-table-column>
        <template #empty>
          <px-empty :image-size="150" />
        </template>
      </px-table>

      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        style="margin-bottom: -10px"
        :total="total"
        @pagination="getRukuList"
      />
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="close">取消</px-button>
          <px-button type="primary" @click="savemeasure()"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
import { pageMeasureList } from "@/api/system/measure";
const emits = defineEmits(["close", "setmeasure"]);
const props = defineProps({
  classcode: {
    type: String,
    default: ""
  }
});
const selectrow = ref({});
const total = ref(0);
const rukuList = ref([]);
const loading = ref(false);
const innerVisible = ref(true);
const queryParams = ref({
  measureName: "",
  tagCode: "",
  measureCode: "",
  isNeedCalculate: "",
  measureTypeCode: "",
  createBy: "",
  className: "",
  measureSource: "",
  isMaintain: "",
  pageNum: 1,
  pageSize: 20,
  systemCode: ""
});
onMounted(() => {
  getRukuList();
});
function handleQuery2(type) {
  if (type == "search") {
    queryParams.value.pageNum = 1;
  }
  getRukuList();
  selectrow.value = null;
}
function getRukuList() {
  loading.value = true;

  pageMeasureList(queryParams.value).then((response: any) => {
    rukuList.value = response.data;
    total.value = response.total;
    loading.value = false;
    console.log(response);
  });
}
const handelRadio = row => {
  selectrow.value = row;
};
function resetQuery() {
  queryParams.value = {
    measureName: "",
    tagCode: "",
    measureCode: "",
    isNeedCalculate: "",
    measureTypeCode: "",
    createBy: "",
    // className: props.classcode,
    className: "",
    measureSource: "",
    isMaintain: "",
    pageNum: 1,
    pageSize: 20,
    systemCode: ""
  };
  getRukuList();
}
const close = () => {
  emits("close", false);
};
const savemeasure = () => {
  emits("setmeasure", selectrow.value);
};
</script>
